
// 后台中的订单信息组件
<template>
  <el-table :data="data" style="width: 100%" max-height="500">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="订单 ID">
            <span>{{ props.row._id }}</span>
          </el-form-item>
          <el-form-item label="收货人姓名">
            <span>{{ props.row.custom.name }}</span>
          </el-form-item>
          <el-form-item label="所属店铺">
            <span>cwk的小铺</span>
          </el-form-item>
          <el-form-item label="联系电话">
            <span>{{ props.row.custom.phone }}</span>
          </el-form-item>
          <el-form-item label="配送地址">
            <span>{{ props.row.deliveryAddress }}</span>
          </el-form-item>
          <el-form-item label="下单时间">
            <span>{{ props.row.start }}</span>
          </el-form-item>
          <el-form-item label="预计送达时间">
            <span>{{ props.row.end }}</span>
          </el-form-item>
          <el-form-item label="是否送达">
            <span>{{ props.row.status }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="订单 ID" prop="_id"> </el-table-column>
    <el-table-column label="收货人姓名" prop="custom.name"> </el-table-column>
    <el-table-column label="下单时间" prop="start"> </el-table-column>
    <el-table-column label="配送地址" prop="deliveryAddress"> </el-table-column>
  </el-table>
</template>
<script>
export default {
  props: {
    data: {
      required: true
    }
  },
  data() {
    return {
      // tableData: [
      //   {
      //     id: '617b86190b72ccbde8d16180',
      //     name: '蔡文凯',
      //     telephone: '18876230897',
      //     address: '达理公寓3A503',
      //     shop: '达理平价超市',
      //     time: '2021-10-29 16:17:40',
      //     end: '2021-10-29 16:47:40',
      //     status: true
      //   }
      // ]
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .demo-table-expand {
  font-size: 0;
}
/deep/ .demo-table-expand label {
  width: 100px;
  color: #99a9bf;
}
/deep/ .demo-table-expand .el-form-item {
  margin-left: 20px;
  margin-bottom: 0;
  width: 50%;
}
</style>
